import FilterView from './filters'
import { ContentStyle, HeaderStyle, LayoutStyle, MainStyle } from '@/styles/main'
import useIndexHook from '../servers/indexServer'
import { StyledLog, StyledModal, StyledPieModal } from '../styles/style'
import { GlobalStyle } from '@/styles/global'
import TableView from '@/components/Table'
import { Button, FormItem, Modal, Password, Space } from '@kedacom/react-next'
import LogDetailView from './detail'
import { FilterContext } from '../context'
import React, { Suspense } from 'react'
const PieChartComponment = React.lazy(() => import('@/components/PieChart'))

const LogTableView = ({ type }: { type: string }) => {
	const { params, setParams, filterData, setFilterData, ...useHook } = useIndexHook(type)
	return (
		<>
			<GlobalStyle />
			<MainStyle className="main-wrap">
				<FilterContext.Provider
					value={{
						params: params,
						setParams: setParams,
						filterData: filterData,
						setFilterData: setFilterData,
						type: type,
						passwordConfirm: useHook.passwordConfirm,
						showPasswordDialog: useHook.showPasswordDialog,
						showPieChart: useHook.showPieChart,
					}}
				>
					<StyledLog className="log-list-wrap">
						<LayoutStyle>
							<LayoutStyle>
								<HeaderStyle className="filter-wrap">
									<FilterView></FilterView>
								</HeaderStyle>
								<ContentStyle className="table-wrap">
									<TableView
										needCheckbox={false}
										rowKey={useHook.rowKey}
										pager={{
											page: params.page,
											size: params.size,
											total: useHook.total,
										}}
										tableDataList={useHook.data}
										columns={useHook.columns}
										onPageChange={(pageIndex: number, pageSize: number) =>
											useHook.onPageChange(pageIndex, pageSize)
										}
									/>
								</ContentStyle>
								<StyledModal
									className="log-modal"
									open={useHook.show}
									title="详情"
									footer={
										<Space className="button-modal">
											<Button
												onClick={() => {
													useHook.showDetail(false)
												}}
											>
												关闭
											</Button>
										</Space>
									}
									onCancel={() => {
										useHook.showDetail(false)
									}}
								>
									<LogDetailView detailData={useHook.detailData}></LogDetailView>
								</StyledModal>
								<StyledModal
									className="password-modal"
									open={useHook.passwordShow}
									title="加密密码"
									footer={
										<Space className="button-modal">
											<Button
												onClick={() => {
													useHook.passwordConfirm()
												}}
											>
												确认
											</Button>
											<Button
												onClick={() => {
													useHook.showPasswordDialog(false)
												}}
											>
												关闭
											</Button>
										</Space>
									}
									onCancel={() => {
										useHook.showPasswordDialog(false)
									}}
								>
									<FormItem label="加密密码">
										<Password
											width={200}
											value={useHook.password}
											placeholder={'请输入加密密码'}
											maxLength={8}
											showEye={false}
											onChange={(e, v) => {
												useHook.setPassword(v)
											}}
										/>
									</FormItem>
								</StyledModal>
							</LayoutStyle>
						</LayoutStyle>
					</StyledLog>
				</FilterContext.Provider>
				<Modal
					open={useHook.showPie}
					title="统计"
					width={'1200px'}
					height={'500px'}
					cancelText={false}
					onOk={() => useHook.showPieChartToggle()}
					onCancel={() => useHook.showPieChartToggle()}
				>
					<StyledPieModal className="modal-pie">
						<Suspense fallback={<div className="modal-loading">Loading...</div>}>
							<div className="pie-left-style">
								<PieChartComponment
									pieData={useHook.pieBehaviorData}
									width="100%"
									series={useHook.behaviorSeries}
								/>
							</div>
							<div className="pie-right-style">
								<PieChartComponment
									pieData={useHook.pieLogLevelData}
									width="100%"
									series={useHook.logLevelSeries}
								/>
							</div>
							<div className="remark-modal"></div>
						</Suspense>
					</StyledPieModal>
				</Modal>
			</MainStyle>
		</>
	)
}

export default LogTableView
